<template>
  <div>
    <div class="step-box">
      <step-bar :active="active"></step-bar>
    </div>
    <div class="add">
      <div class="add-title">
        <p>{{$t('lackMsg.stepach')}}</p>
      </div>
      <div class="add-choose">
        <van-radio-group v-model="sType" @change="chooseRadio">
          <van-radio icon-size="16" name="htlx01">{{$t('message.xdxyl2')}}</van-radio>
          <van-radio icon-size="16" name="htlx02">{{$t('message.cjxml2')}}</van-radio>
          <van-radio icon-size="16" name="htlx03">{{$t('message.zsyzl2')}}</van-radio>
          <van-radio icon-size="16" name="htlx04">{{$t('message.qwfbl2')}}</van-radio>
          <van-radio icon-size="16" name="htlx05">{{$t('message.lmptl2')}}</van-radio>
          <van-radio icon-size="16" name="htlx06">{{$t('message.sfcxl2')}}</van-radio>
        </van-radio-group>
      </div>
    </div>
    <div class="bnt-div">
      <button type="button" class="bnt" @click="next">{{$t('addMsg.xyb')}}</button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import StepBar from "@/components/StepBar";
import buried from "@/utils/buried";
export default {
  components: {
    StepBar
  },
  mounted() {
    buried("M_result_add_new", "M_add_new_pv");
  },
  methods: {
    next() {
      let path = "";
      if (["htlx01", "htlx02", "htlx03"].includes(this.sType)) {
        // 合同
        path = "contractSecond";
      } else {
        // 成果
        path = "achievementsSecond";
      }

      this.$router.push({
        path,
        query: {
          type: this.sType
        }
      });
    },
    chooseRadio(value) {
      this.sType = value;
    }
  },
  data() {
    return {
      title: "新建统计表",
      active: 0,
      sType: "htlx01"
    };
  },
  mounted() {
    buried("M_result_add_new", "M_add_new_pv");
  }
};
</script>

<style lang="scss" scoped>
  .step-box {
    padding: 15px;
  }
.add {
  background-color: #ffffff;
  margin: 15px;
  border-radius: 8px;
}
.add-title {
  width: 95%;
  border-bottom: 1px solid #e6e9ee;
  color: #212121;
  font-size: 14px;
  padding: 14px 0;
  margin: 6px auto;
  font-weight: 550;
}
.add-title p {
  border-left: 3px solid #ffbc3a;
  padding-left: 5px;
}
.add-choose {
  width: 95%;
  margin: 0 auto;
  padding-bottom: 26px;
}
.van-radio {
  margin-top: 10px;
}
.van-radio {
  ::v-deep .van-radio__icon {
    position: relative;
    bottom: 9px;
  }
  ::v-deep .van-radio__icon--checked .van-icon {
    background-color: #ffbc3a !important;
    border-color: #ffbc3a !important;
  }
}
.bnt {
  width: 80%;
  height: 44px;
  background: rgba(48, 79, 254, 1)
    linear-gradient(90deg, rgba(254, 207, 71, 1) 0%, rgba(255, 187, 56, 1) 100%);
  border-radius: 22px;
  border: none;
  outline: none;
  font-size: 18px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.bnt-div {
  text-align: center;
  margin: 40px 0 20px 0;
}
</style>
